<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 800px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            background: #000000;
            border: 2px solid red;
            overflow: hidden;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>

    <div id="box"></div>

    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        function Yan() {
            this.container = document.querySelector('#box')
            this.bindEvent()
        }

        Yan.prototype.bindEvent = function () {
            var self = this
            this.container.onclick = function (evt) {
                console.log(123);
                var e = evt || event
                var hua = self.createFirwork()
                hua.style.left = e.offsetX+'px'
                $(hua).animate({top:e.offsetY+'px'},800,function(){
                    hua.remove()
                })
               
            }
        }
        Yan.prototype.createFirwork=function(){
            var div=document.createElement('div')
            console.log(div);
            
            div.className='ball'
            div.style.backgroundColor='#'+Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0')
            this.container.appendChild(div)
            return div
        }
        var res=new Yan()
    </script>
</body>

</html>